<template>
  <selectPop
    v-model:dialogVisible="visible"
    selectKey="materialId"
    v-model:selecedList="list"
    :getData="libraryService.getPageList"
    selectTitle="素材"
    title="选择素材"
    type="checkBox"
    keyName="materialName"
    v-model:searchParams="searchParams"
    :formItems="formItems"
  >
    <template #checkboxName="{ item }">
      {{ item.materialName }}
    </template>
    <template #selectName="{ item }">
      <Tooltip :text="item.materialName"></Tooltip>
    </template>
  </selectPop>
</template>

<script setup lang="ts">
import selectPop from '@/components/select-pop/index.vue';
import { libraryService } from '@/api/library';
const props = defineProps({
  dialogVisible: {
    type: Boolean,
  },
  item: {
    type: Object,
  },
  handleSearch: {
    type: Function,
  },
  showManager: {
    type: Boolean,
    default: true,
  },
  title: {
    type: String,
  },
  type: {
    type: Number,
  },
  selecedList: {
    type: Array,
  },
});
const formItems = ref([
  {
    placeholder: '请输入素材名称',
    key: 'materialName',
    type: 'input',
  },
  {
    placeholder: '请选择所属分类',
    key: 'type',
    type: 'select',
  },
]);
const visible = ref(props.dialogVisible);
const list = ref(props.selecedList);
const emit = defineEmits(['update:dialogVisible', 'update:selecedList']);
watch(visible, (val) => {
  if (!val) emit('update:selecedList', list.value);
  emit('update:dialogVisible', val);
});
const searchParams = ref({
  isDisable: 0,
});

onMounted(() => {});
</script>
<style lang="scss" scoped>
.dialog__body {
  display: flex;

  .left {
    width: 650px;
  }

  .right {
    flex: 1;
    width: 0;
    border-left: 1px solid #ccc;
    padding-left: 10px;
  }
}
</style>
